<div id="users" class="page-layout carded fullwidth inner-scroll">

    <!-- HEADER -->
    <div class="header accent p-24" fxLayout="column" fxLayoutAlign="center start">


        <breadcrumb></breadcrumb>

        <!-- SEARCH -->
        <div class="search-wrapper mx-32 mx-md-0">
            <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
                <mat-icon>search</mat-icon>
                <input #filter placeholder="Search for a product">
            </div>
        </div>
        <!-- / SEARCH -->
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">


        <!-- CONTENT CARD -->
        <div class="content-card">
            <mat-table class="users-table"
                       #table [dataSource]="dataSource"
                       matSort
                       [@animateStagger]="{value:'50'}"
                       basePerfectScrollbar>

                <!-- ID Column -->
                <ng-container matColumnDef="id">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
                    <mat-cell *matCellDef="let users">
                        <p class="text-truncate">{{users.id}}</p>
                    </mat-cell>
                </ng-container>

                <!-- 用户名 Column -->
                <ng-container matColumnDef="username">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>用户名</mat-header-cell>
                    <mat-cell *matCellDef="let users">
                        <p class="text-truncate">{{users.username}}</p>
                    </mat-cell>
                </ng-container>

                <!-- email Column -->
                <ng-container matColumnDef="email">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>email</mat-header-cell>
                    <mat-cell *matCellDef="let users">
                        <p class="text-truncate">{{users.email}}</p>
                    </mat-cell>
                </ng-container>

                <!-- status Column -->
                <ng-container matColumnDef="status">
                    <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>状态</mat-header-cell>
                    <mat-cell *matCellDef="let users" fxHide fxShow.gt-xs>
                        <mat-icon *ngIf="users.status" class="active-icon green-600 s-16">check</mat-icon>
                        <mat-icon *ngIf="!users.status" class="active-icon red-500 s-16">close</mat-icon>
                    </mat-cell>
                </ng-container>

                <!-- created_at Column -->
                <ng-container matColumnDef="created_at">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>创建时间</mat-header-cell>
                    <mat-cell *matCellDef="let users" fxHide fxShow.gt-xs>
                        <p class="price text-truncate">
                            {{users.created_at}}
                        </p>
                    </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>

                <mat-row *matRowDef="let users; columns: displayedColumns;"
                         class="product"
                         matRipple
                         [routerLink]="'/setting/basic/permissions/users/'+users.id">
                </mat-row>

            </mat-table>

            <mat-paginator #paginator
                           [length]="dataSource.filteredData.length"
                           [pageIndex]="0"
                           [pageSize]="10"
                           [pageSizeOptions]="[5, 10, 25, 100]">
            </mat-paginator>

        </div>
        <!-- / CONTENT CARD -->
    </div>
    <!-- / CENTER -->
</div>
